import { Swiper, SwiperItem, View } from '@tarojs/components'
import clsx from 'clsx'
import { useState } from 'react'

const pages = [
  { label: '声音克隆', value: 0 },
  { label: '视频播放', value: 1 },
  { label: '语音合成', value: 2 }
]

export default function Index() {
  const [currentPage, setCurrentPage] = useState(0)
  return (
    <View className='p-2 h-screen flex flex-col gap-2'>
      <View className='flex justify-center pb-2'>
        <View className='flex justify-center gap-2 bg-blue-500 rounded-full' >
          {pages.map(p => <View
            onClick={() => setCurrentPage(p.value)}
            className={clsx(
              'p-2 text-white rounded-full shadow-lg',
              { 'bg-blue-600 scale-110 shadow-blue-700': currentPage === p.value }
            )}>{p.label}</View>)}
        </View>
      </View>
      <Swiper
        className="flex-1"
        // autoplay
        // indicatorColor="#999"
        current={currentPage}
        onChange={e => setCurrentPage(e.detail.current)}
      >
        {pages.map(p => <SwiperItem key={p.value}>
          <View className='w-full h-full overflow-y-auto p-2'>
            {p.label}
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
            <View className='text-3xl'>hello world</View>
          </View>
        </SwiperItem>)}

      </Swiper>
    </View>
  )
}
